import React, {Component} from 'react';
import {Button, FlatList, StyleSheet, Text, TouchableNativeFeedback, View} from 'react-native';

// DES: 总是用export default返回一个渲染对象
export default class TestFlatListComponent extends Component {
    render() {
        return (
            <View style={styles.container}>
                <FlatList
                    data={[
                        {key: 'Devin'},
                        {key: 'Dan'},
                        {key: 'Dominic'},
                        {key: 'Jackson'},
                        {key: 'James'},
                        {key: 'Joel'},
                        {key: 'John'},
                        {key: 'Jillian'},
                        {key: 'Jimmy'},
                        {key: 'Julie'},
                    ]}
                    renderItem={({item}) => <Text style={styles.button}>{item.key}</Text>}
                />
            </View>
        );
    }
}

/**
 * 创建Style
 */
const styles = StyleSheet.create({
    // DES: 定义ContainerStyle
    container: {
        flex: 1,
        paddingTop: 20,
    },
    // DES: 定义ItemStyle
    button: {
        marginBottom: 30,
        width: 260,
        alignItems: 'center',
        backgroundColor: '#2196F3',
    },
    buttonText: {
        textAlign: 'center',
        padding: 20,
        color: '#ffffff',
    },
});
